import { Routes, Route, useNavigate, NavLink,Navigate } from "react-router-dom";

import "./简单使用.css"

export default function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        {/* 重定向到首页 */}
        <Route path="*" element={<Navigate to="/"/>} />
      </Routes>
    </div>
  );
}

function Home() {
  let activeClassName = "underline";
  return (
    <>
      <main>
        <h2>Welcome to the homepage!</h2>
        <p>You can do this, I believe in you.</p>
      </main>
      <nav>
        {/* <Link to="/about">About</Link> */}
        <NavLink 
          to="/about"
          className={({ isActive }) =>isActive ? activeClassName : undefined}
        >About</NavLink>
      </nav>
    </>
  );
}

function About() {
  const navigate = useNavigate()
  const handelClickToHome = () => {
    navigate("/")
  }

  return (
    <>
      <main>
        <h2>Who are we?</h2>
        <p>That feels like an existential question, don't you think?</p>
      </main>
      <nav>
        <button onClick={handelClickToHome}>Home</button>
        {/* <NavLink 
          to="/"
          style={({ isActive }) => {return isActive ? activeStyle : undefined}}
        >Home</NavLink> */}
      </nav>
    </>
  );
}
